// Wiki editor formatting

@use "_base";
@use "_features";
@use "_breakpoint";

a {
  -moz-outline: none !important;
}

.jaws {
  // JAWS should see it, but you can't
  display: block;
  height: 1px;
  left: -5000px;
  overflow: hidden;
  position: absolute;
  top: -5000px;
  width: 1px;
}

.disabled {
  color: lightgray;
}

#gollum-editor-body-ace {
  overflow: hidden;
  padding: 0;
}

#gollum-editor {

  /* @control function-bar */
  #gollum-editor-function-bar  {

    @include breakpoint.desktop-breakpoint {
      overflow: hidden;
    }

    #gollum-editor-function-buttons {
      display: none;
    }

    &.active {
      #gollum-editor-function-buttons {
        display: block;

        @include breakpoint.desktop-breakpoint {
          overflow: hidden;
          margin: 0;
          padding: 0 0 1.1em 0;
          float: left;
        }
      }
    }

    a {
      &.function-button {
        float: left;
        overflow: hidden;

        span {
          display: block;

          @include features.text-conceal-simple;

        }
      }

      &.disabled {
        display: none;
      }
    }

  }


  /* @section form-fields */

  textarea {
    height: 30em;
  }

  .collapsed {
    h4 {
      color: #bbb;
    }

    textarea {
      display: none;
    }
  }

  .expanded {

    textarea {
      height: 7em;
    }
  }

}


.BasicSelect .SelectMenu-modal {
    width: 210px;
}

/* @section uploads */

#gollum-editor-body-ace {
  & + div {
    display: none;
  }

  &.dragging {
    box-shadow: 0 0 10px #AAE000;
  }

  &.uploading {
    opacity: 1;

    & + div {
      display: block;
    }
  }
}

/* @section help */
#gollum-editor-help {

  @include breakpoint.desktop-breakpoint {
    clear: none;
  }
}

#gollum-editor-help-parent,
#gollum-editor-help-list {
  margin: 0;


  @include breakpoint.desktop-breakpoint {
    height: 17em;
    width: 18%;
    overflow: auto;
    padding: 1em 0;
  }

  li {
    font-size: 1.2em;
    line-height: 1.6em;
    margin: 0;
    padding: 0;

    a {
      border: 1px solid transparent;
      border-width: 1px 0;
      display: block;
      font-weight: bold;
      height: 100%;
      width: auto;
      padding: 0.2em 1em;
      text-shadow: 0 -1px 0 #fff;
      font-size: 0.8em;

      @include breakpoint.desktop-breakpoint {
        font-size: 1em;
      }

      &:hover {
        background: #fff;
        border-color: #f0f0f0;
        text-decoration: none;

        box-shadow: none;
      }

      &.selected {
        border: base.$border-standard;
        border-bottom-color: #e7e7e7;
        border-width: 1px 0;
        background: #fff;
        color: #000;

        box-shadow: 0 1px 2px #f0f0f0;
      }
    }
  }
}



#gollum-editor-help-list {
  background: #fafafa;

}

#gollum-editor-help-wrapper {
  background: #fff;
  overflow: auto;
  height: 17em;
  padding: 1em;
  clear: both;

  @include breakpoint.desktop-breakpoint {
    clear: none;
  }
}

#gollum-editor-help-content {
  font-size: 1.2em;
  margin: 0 1em 0 0.5em;
  padding: 0;
  line-height: 1.8em;

  p {
    margin: 0 0 1em 0;
    padding: 0;
  }
}
